<template>
	<view>
		<view class="liveBroadcast" v-if="!parameter.layout || parameter.layout == 1">
			<view class="liveBroadcast-box" v-for="(item, index) in dataList" :key="index" @click="golive(item)">
				<image :src="item.cover_img" class="image" mode="aspectFill"></image>
				<view class="post_box">
					<u-icon class="video-icon" name="play-circle"></u-icon>
					<view class="Notice">{{ item.live_status == '102' ? '直播预告' + item.start_time : statusObj[item.live_status] || '已结束' }}</view>
				</view>
			</view>
		</view>
		<view class="data-list" v-else-if="parameter.layout == 2">
			<view class="data-item flex" v-for="(item, index) in cover_img" :key="index" @click="golive(item)">
				<image src="" mode="aspectFill" class="di-img"></image>
				<view class="di-r flex-c">
					<view class="di-name">{{ item.name || '名称' }}</view>
					<view class="di-time f-24 c-66">开始：{{ item.start_time || '2021-12-23 10:42:12' }}</view>
					<view class="di-time f-24 c-66">结束：{{ item.end_time || '2021-12-23 10:42:12' }}</view>
					<view class="di-prod">
						<block v-for="(gItem, gIndex) in 3" :key="gIndex"><image src="" mode="aspectFill" class="dip-item"></image></block>
					</view>
				</view>
				<view class="di-state l1 flex-ct f-18 c-ff">正在直播</view>
				<image class="di-code" src="" catchtap="cratePoster"></image>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	components: {},
	props: {
		parameter: {
			type: Object,
			default: () => {
				return {};
			}
		},
		dataList: {
			type: Array,
			default: []
		}
	},
	data() {
		return {
			statusObj: {
				101: '直播中',
				103: '直播已结束'
			}
		};
	},

	methods: {
		golive(item) {
			let url = `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${item.roomid}`;
			if (this.$isLogin()) {
				let customParams = {
					superior: this.$store.state.vuex_token
				};
				customParams = encodeURIComponent(JSON.stringify(customParams));
				url += `&custom_params=${customParams}`;
			}
			// 开发者在直播间页面路径上携带自定义参数（如示例中的path和pid参数），后续可以在分享卡片链接和跳转至商详页时获取，
			wx.navigateTo({
				url: url
			});
		},
	}
};
</script>

<style scoped lang="scss">
.liveBroadcast {
	background-color: #fff;
	padding: 10rpx 30rpx 30rpx;
}
.liveBroadcast-box {
	width: 690rpx;
	height: 360rpx;
	background-color: #000000;
	border-radius: 8rpx;
	position: relative;
	margin-bottom: 30rpx;
	&:last-of-type {
		margin-bottom: 0;
	}
}
.post_box {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	.video-icon {
		font-size: 90rpx;
		color: #fff;
		margin-bottom: 20rpx;
	}
	.Notice {
		line-height: 42rpx;
		font-size: 24rpx;
		padding: 0 24rpx;
		border: 1px solid #fff;
		color: #fff;
		border-radius: 22rpx;
	}
}
// ----
.data-list {
	width: 100%;
	.data-item {
		width: 100%;
		background-color: #ffffff;
		min-height: 300rpx;
		margin-bottom: 24rpx;
		border-radius: 20rpx;
		position: relative;
		.di-img {
			background-color: #f5f5f5;
			width: 300rpx;
			height: 300rpx;
			border-radius: 20rpx;
		}
		.di-r {
			flex: 1;
			overflow: hidden;
			padding: 12rpx;
			.di-prod {
				width: 100%;
				margin-top: auto;
				display: grid;
				grid-template-columns: repeat(3, 120rpx);
				grid-template-rows: 120rpx;
				grid-gap: 9rpx;
				.dip-item {
					background-color: #ccc;
					border-radius: 8rpx;
				}
			}
		}
		.di-state {
			height: 30rpx;
			background: rgba(69, 133, 119, 1);
			border-radius: 15rpx;
			position: absolute;
			top: 9rpx;
			left: 9rpx;
			padding: 0 16rpx;
		}
		.di-code {
			width: 70rpx;
			height: 70rpx;
			background-color: #ccc;
			position: absolute;
			bottom: 0;
			left: 0;
			border-radius: 50%;
		}
	}
}
</style>
